<template>
  <n-card class="f-ad-creative-media" :header-style="{ padding: '10px', background: '#F1F5FF', marginBottom: '10px' }"
    ref="elementRef">
    <template #header>{{ index }}.营销组件</template>
    <n-empty description="请先选择创意模版" v-if="!creativor.canuse">
    </n-empty>

    <n-skeleton :repeat="4" text v-if="creativor.loading || creativor.contentLoading"></n-skeleton>
    <x-form ref="formRef" v-model:model="creativor" :rules="rules" label-placement="top" label-width="120"
      v-show="!creativor.loading && !creativor.contentLoading && creativor.canuse">
      <JumpInfoComponent :key="marketComponents[MAIN_JUMP_INFO] ? marketComponents[MAIN_JUMP_INFO].uuid : 1"
        :component="marketComponents[MAIN_JUMP_INFO]" v-if="marketComponents[MAIN_JUMP_INFO]"
        :path="createPath(MAIN_JUMP_INFO)">
      </JumpInfoComponent>
      <text-link :component="marketComponents.text_link" v-if="marketComponents.text_link"
        :key="marketComponents.text_link ? marketComponents.text_link.uuid : 1"
        :path="createPath('text_link')"></text-link>
      <action-button :component="marketComponents.action_button" v-if="marketComponents.action_button"
        :key="marketComponents.action_button ? marketComponents.action_button.uuid : 1"
        :path="createPath('action_button')"></action-button>
      <explcit :component="marketComponents.show_data" v-if="marketComponents.show_data"
        :key="marketComponents.show_data ? marketComponents.show_data.uuid : 1" :path="createPath('show_data')">
      </explcit>
      <danmu :key="marketComponents.barrage ? marketComponents.barrage.uuid : 1" :component="marketComponents.barrage"
        v-if="marketComponents.barrage" :path="createPath('barrage')">
      </danmu>
      <countdown :key="marketComponents.count_down ? marketComponents.count_down.uuid : 1"
        :component="marketComponents.count_down" v-if="marketComponents.count_down" :path="createPath('count_down')">
      </countdown>
      <floating-zone :key="marketComponents.floating_zone ? marketComponents.floating_zone.uuid : 1"
        :component="marketComponents.floating_zone" :path="createPath('floating_zone')"
        v-if="marketComponents.floating_zone"></floating-zone>
      <label-component :key="marketComponents.label ? marketComponents.label.uuid : 1"
        :component="marketComponents.label" v-if="marketComponents.label" :path="createPath('label')"></label-component>
      <end-page :key="marketComponents.end_page ? marketComponents.end_page.uuid : 1"
        :component="marketComponents.end_page" v-if="marketComponents.end_page"
        :path="createPath('end_page')"></end-page>
      <n-form-item label="创意名称" path="none" :rule="adCreativorRules" :show-require-mark="true">
        <n-input v-model:value="creativor.name" maxlength="55" show-count  :count-graphemes="count" ></n-input>
      </n-form-item>
    </x-form>
  </n-card>
</template>

<script setup lang="ts">
import { useRoute } from 'vue-router'
const route = useRoute()
import { XForm } from '@/components'
import { NCard, NFormItem, NButton, NInput, NSkeleton, NEmpty } from 'naive-ui'
import { computed, onMounted, reactive, ref, watch } from 'vue'
import { useStore } from '@/store'
import TextLink from './components/text-link-component.vue'
import Explcit from './components/explicit-component.vue';
import ActionButton from './components/action-button-component.vue';
import Countdown from './components/count-down-component.vue';
import FloatingZone from './components/floating-zone-component.vue';
import Danmu from './components/danmu-component.vue';
import LabelComponent from './components/label-component.vue'
import JumpInfoComponent from './components/jump-info-component.vue';
import EndPage from './components/end-page.vue';
import { MAIN_JUMP_INFO } from '@/store/modules/adv/helper';
import { getRealAdvName } from '@/store/modules/adv/helper';
import { count } from '@/utils/text';
defineProps({
  index: {
    type: Number
  }
})

const store = useStore();
const adv = computed(() => store.state.adv.modal);
const creativor = computed(() => store.state.adv.modal.creativor);
const marketComponents = computed(() => store.state.adv.modal.marketComponents);

const rules = reactive({});

const adCreativorRules = ref({
  trigger: 'input',
  validator(rule: any, value: any) {

    if (!creativor.value.name) {
      return new Error('请填写创意名称!')
    }
    if(count(creativor.value.name) >55) {
      return new Error('创意名称不能超过55个字!')
    }
    return true;

  }
})

function createPath(key: any) {
  return ['marketComponents', key];
}
const elementRef = ref();
const formRef = ref();
function validate() {
  return new Promise<void>((resolve, reject) => {
    const name = getRealAdvName(store.state.adv, creativor.value.name);
    creativor.value.name = name;
    formRef.value?.validate(async (errors: any) => {

      if (!errors) {
        try {
          resolve()
        } catch (e) {
          reject();
          store.commit('adv/SCROLL_TO_ELEMENT', elementRef.value.$el)
        }
      } else {
        store.commit('adv/SCROLL_TO_ELEMENT', elementRef.value.$el)
        reject()
      }
    })
  })
}


defineExpose({
  validate
})

</script>

<style scoped lang="scss"></style>
